<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>25级计应2班官网</title>
    <script src="./tailwind.js"></script>
    <link href="./font-awesome.min.css" rel="stylesheet">
    <script>
        // Tailwind 配置
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <nav id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#" class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <span class="font-bold text-xl text-dark">25级计应2班官网</span>
            </a>
            <div class="hidden md:flex items-center space-x-6">
                <a href="#home" class="nav-link font-medium hover:text-primary transition-colors">首页</a>
                <a href="#students" class="nav-link font-medium hover:text-primary transition-colors">学生作品</a>
                <a href="#about" class="nav-link font-medium hover:text-primary transition-colors">关于课程</a>
            </div>
            <button class="md:hidden text-gray-700" id="menu-toggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#home" class="py-2 hover:text-primary transition-colors">首页</a>
                <a href="#students" class="py-2 hover:text-primary transition-colors">学生作品</a>
                <a href="#about" class="py-2 hover:text-primary transition-colors">关于课程</a>
            </div>
        </div>
    </nav>

    <!-- 页面容器 -->
    <div class="page-container">
        <!-- 首页 -->
        <section id="home" class="min-h-screen pt-24 pb-16">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-6 text-gradient">
                        25级计应2班学生作品展示
                    </h1>
                    <p class="text-gray-600 text-lg max-w-2xl mx-auto">
                        探索我们班级学生的创意与技术，每一个作品都代表着他们在HTML学习旅程中的成长与进步。
                    </p>
                </div>

                <div id="students" class="py-12">
                    <h2 class="text-3xl font-bold mb-10 text-center">我们的学生</h2>
                    <div id="students-container"
                        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-8 gap-6">
                        <!-- 学生卡片将通过JavaScript动态生成 -->
                    </div>
                </div>

                <div id="about" class="py-16 mt-16 bg-white rounded-2xl shadow-md p-8">
                    <h2 class="text-3xl font-bold mb-6 text-center">关于本课程</h2>
                    <div class="max-w-3xl mx-auto">
                        <p class="text-gray-700 mb-4">
                            本课程旨在教授学生HTML、CSS和JavaScript的基础知识，培养学生的网页设计与开发能力。通过理论学习与实践操作相结合的方式，让学生掌握现代网页开发的核心技能。
                        </p>
                        <p class="text-gray-700 mb-4">
                            课程注重培养学生的创造力和问题解决能力，鼓励学生通过完成实际项目来巩固所学知识。本网站展示的是学生们在课程中的优秀作品。
                        </p>
                        <div class="flex flex-wrap justify-center gap-4 mt-8">
                            <div class="flex items-center bg-blue-50 px-4 py-2 rounded-lg">
                                <i class="fa fa-html5 text-orange-500 mr-2"></i>
                                <span>HTML5</span>
                            </div>
                            <div class="flex items-center bg-blue-50 px-4 py-2 rounded-lg">
                                <i class="fa fa-css3 text-blue-500 mr-2"></i>
                                <span>CSS3</span>
                            </div>
                            <div class="flex items-center bg-blue-50 px-4 py-2 rounded-lg">
                                <i class="fa fa-js text-yellow-500 mr-2"></i>
                                <span>JavaScript</span>
                            </div>
                            <div class="flex items-center bg-blue-50 px-4 py-2 rounded-lg">
                                <i class="fa fa-mobile text-green-500 mr-2"></i>
                                <span>响应式设计</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 学生详情页面容器 -->
        <div id="student-pages-container">
            <!-- 学生详情页面将通过JavaScript动态生成 -->
        </div>

        <!-- 学生默认页面 -->
        <section id="student-default" class="student-page hidden min-h-screen pt-24 pb-16">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center mb-10">
                    <a href="#" class="back-link flex items-center text-primary hover:underline">
                        <i class="fa fa-arrow-left mr-2"></i>
                        <span>返回首页</span>
                    </a>
                </div>

                <div class="bg-white rounded-2xl shadow-lg overflow-hidden p-8 text-center">
                    <div class="max-w-2xl mx-auto">
                        <i class="fa fa-file-o text-6xl text-gray-300 mb-6"></i>
                        <h2 class="text-2xl font-bold mb-4">作品页面即将上线</h2>
                        <p class="text-gray-600 mb-8">
                            这位同学正在努力创作中，敬请期待他们的精彩作品！
                        </p>
                        <a href="#"
                            class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors">
                            返回学生列表
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-2">
                        <i class="fa fa-code text-primary text-xl"></i>
                        <span class="font-bold text-lg">25级计应2班</span>
                    </div>
                    <p class="text-gray-400 text-sm">展示学生创意与技术的平台</p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-linkedin text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                <p>&copy; 2025 25级计应1班. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 全局变量存储学生数据
        let studentsData = [];

        // 加载学生数据
        async function loadStudentData() {
            try {
                const response = await fetch('./jy2502/students.json');
                studentsData = await response.json();

                // 数据加载完成后初始化页面
                renderStudentCards();
                renderStudentPages();
                setupEventListeners();
            } catch (error) {
                console.error('加载学生数据失败:', error);
                // 可以在这里添加错误处理，比如显示错误信息给用户
            }
        }

        // 渲染学生卡片
        function renderStudentCards() {
            const container = document.getElementById('students-container');
            container.innerHTML = ''; // 清空容器

            studentsData.forEach(student => {
                // 保持原有的渲染逻辑不变
                const card = document.createElement('div');
                card.className = 'student-card card-hover bg-white rounded-xl shadow-md overflow-hidden cursor-pointer';
                card.setAttribute('data-student', student.id);

                let worksInfo = '';
                if (student.worksCount > 0) {
                    worksInfo = `
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 hover:opacity-100 transition-opacity flex items-end">
                        <div class="p-4 text-white">
                            <p class="text-sm"><i class="fa fa-code mr-1"></i> ${student.worksCount}个作品</p>
                        </div>
                    </div>
                `;
                }

                card.innerHTML = `
                <div class="relative">
                    <img src="${student.avatar}" alt="${student.name}的头像" class="w-full h-48 object-cover">
                    ${worksInfo}
                </div>
                <div class="p-4 text-center">
                    <h3 class="font-bold text-lg mb-1">${student.name}</h3>
                    <p class="text-gray-500 text-sm">${student.title}</p>
                </div>
            `;

                container.appendChild(card);
            });
        }

        // 渲染学生详情页面
        function renderStudentPages() {
            const container = document.getElementById('student-pages-container');
            container.innerHTML = ''; // 清空容器

            studentsData.forEach(student => {
                if (!student.hasDetailPage) return;

                // 保持原有的渲染逻辑不变
                const prevStudentId = student.id === 1 ? studentsData.length : student.id - 1;
                const nextStudentId = student.id === studentsData.length ? 1 : student.id + 1;

                const page = document.createElement('section');
                page.id = `student-${student.id}`;
                page.className = 'student-page hidden min-h-screen pt-24 pb-16';

                // 生成技能标签
                const skillsTags = student.skills.map(skill =>
                    `<span class="bg-white/20 px-3 py-1 rounded-full text-sm">${skill}</span>`
                ).join('');

                // 生成联系方式
                const contactsHtml = student.contacts.map(contact =>
                    `<a href="#" class="flex items-center text-white/90 hover:text-white transition-colors">
                    <i class="fa ${contact.icon} w-6"></i>
                    <span>${contact.text}</span>
                </a>`
                ).join('');

                // 生成作品列表
                const worksHtml = student.works.map(work =>
                    `<div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                    <div class="h-48 bg-gray-100">
                        <img src="${work.image}" alt="${work.title}预览" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h4 class="text-xl font-bold mb-2">${work.title}</h4>
                        <p class="text-gray-600 mb-4">${work.description}</p>
                        <a href="${work.link}" class="inline-flex items-center text-primary hover:underline">
                            查看作品 <i class="fa fa-external-link ml-1"></i>
                        </a>
                    </div>
                </div>`
                ).join('');

                page.innerHTML = `
                <div class="container mx-auto px-4">
                    <div class="flex justify-between items-center mb-10">
                        <a href="#" class="back-link flex items-center text-primary hover:underline">
                            <i class="fa fa-arrow-left mr-2"></i>
                            <span>返回首页</span>
                        </a>
                        <div class="flex space-x-2">
                            <button class="student-nav-btn p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" data-student="${prevStudentId}">
                                <i class="fa fa-chevron-left"></i>
                            </button>
                            <button class="student-nav-btn p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" data-student="${nextStudentId}">
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>

                    <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
                        <div class="md:flex">
                            <!-- 左侧：个人信息 -->
                            <div class="md:w-1/3 bg-gradient-to-br ${student.gradient} p-8 text-white">
                                <div class="text-center mb-8">
                                    <img src="${student.avatar}" alt="${student.name}的头像" class="w-48 h-48 rounded-full object-cover border-4 border-white/30 mx-auto mb-4">
                                    <h2 class="text-3xl font-bold">${student.name}</h2>
                                    <p class="text-white/80 mt-1">${student.title}</p>
                                </div>

                                <div class="space-y-6">
                                    <div>
                                        <h3 class="text-lg font-semibold mb-3 border-b border-white/20 pb-2">个人简介</h3>
                                        <p class="text-white/90">${student.bio}</p>
                                    </div>

                                    <div>
                                        <h3 class="text-lg font-semibold mb-3 border-b border-white/20 pb-2">技能</h3>
                                        <div class="flex flex-wrap gap-2">
                                            ${skillsTags}
                                        </div>
                                    </div>

                                    <div>
                                        <h3 class="text-lg font-semibold mb-3 border-b border-white/20 pb-2">联系方式</h3>
                                        <div class="space-y-2">
                                            ${contactsHtml}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 右侧：作品展示 -->
                            <div class="md:w-2/3 p-8">
                                <h3 class="text-2xl font-bold mb-6">我的作品</h3>
                                <div class="space-y-8">
                                    ${worksHtml}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;

                container.appendChild(page);
            });
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 移动端菜单切换
            document.getElementById('menu-toggle').addEventListener('click', function () {
                const mobileMenu = document.getElementById('mobile-menu');
                mobileMenu.classList.toggle('hidden');
            });

            // 滚动时导航栏效果
            window.addEventListener('scroll', function () {
                const navbar = document.getElementById('navbar');
                if (window.scrollY > 50) {
                    navbar.classList.add('py-2', 'shadow');
                    navbar.classList.remove('py-3');
                } else {
                    navbar.classList.add('py-3');
                    navbar.classList.remove('py-2', 'shadow');
                }
            });

            // 页面切换功能 - 使用事件委托
            document.addEventListener('click', function (e) {
                // 学生卡片点击
                if (e.target.closest('.student-card')) {
                    const card = e.target.closest('.student-card');
                    const studentId = card.getAttribute('data-student');
                    showStudentPage(studentId);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }

                // 返回首页
                if (e.target.closest('.back-link')) {
                    e.preventDefault();
                    document.getElementById('home').classList.remove('hidden');
                    document.querySelectorAll('.student-page').forEach(page => {
                        page.classList.add('hidden');
                    });
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }

                // 学生页面导航按钮
                if (e.target.closest('.student-nav-btn')) {
                    const btn = e.target.closest('.student-nav-btn');
                    const studentId = btn.getAttribute('data-student');
                    showStudentPage(studentId);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;

                    document.querySelector(targetId).scrollIntoView({
                        behavior: 'smooth'
                    });

                    // 如果是移动端，点击后关闭菜单
                    if (!document.getElementById('mobile-menu').classList.contains('hidden')) {
                        document.getElementById('mobile-menu').classList.add('hidden');
                    }
                });
            });
        }

        // 显示指定学生页面
        function showStudentPage(studentId) {
            document.getElementById('home').classList.add('hidden');
            document.querySelectorAll('.student-page').forEach(page => {
                page.classList.add('hidden');
            });

            // 检查学生是否有详细页面
            const student = studentsData.find(s => s.id == studentId);
            if (student && student.hasDetailPage) {
                document.getElementById(`student-${studentId}`).classList.remove('hidden');
            } else {
                document.getElementById('student-default').classList.remove('hidden');
            }
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function () {
            loadStudentData();
        });
    </script>
</body>

</html>